import {useState} from 'react';
import ProForm, {ProFormText, ProFormTextArea} from "@ant-design/pro-form";
import {Form, InputNumber, message, Modal, Radio} from 'antd'
import UploadList from '../components/UploadList'

const ModalList = ( props ) => {
  const {isModalVisible,closed,open} = props;
  const [value,setValue] = useState(1);
  const [form] = Form.useForm();


  // 关于显示和隐藏状态的事件
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    // setValue(e.target.value);
  };
  return (
    <div>
      <Modal
        width={600}
        visible={isModalVisible}
        title="添加分类"
        onOk={async()=>{
          form.validateFields().then(async values=>{
            open(values)
          })
        }}
        onCancel={closed}
      >
        <ProForm
        submitter={false}
        form={form}
        >
          <ProFormText
            name="nickname"
            label="分类名称"
            placeholder="请输入相关分类！"
            rules={[{required: true, message: '请输入相关分类！'}]}
          />
          <ProFormTextArea
            name="category"
            label="分类简介"
            placeholder="请输入分类简介！"
            rules={[{required: true, message: '请输入分类简介！'}]}
          />
          <ProForm.Item
            name="image_url"
            label="分类图片"
          >
            <UploadList/>
          </ProForm.Item>

          <ProForm.Item
            name="num"
            label="排序"
            rules={[{required: true, message: '请输入相关分类！'}]}
          >
            <InputNumber min={-100} max={100} defaultValue={3} onChange={()=>{}} />
          </ProForm.Item>
          <ProForm.Item
            name="status"
            label="状态"
            rules={[{required: true, message: '请输入相关分类！'}]}
          >
            <Radio.Group onChange={onChange} value={value}>
              <Radio value={1}>显示</Radio>
              <Radio value={2}>隐藏</Radio>
            </Radio.Group>
          </ProForm.Item>
        </ProForm>
      </Modal>
    </div>
  );
};

export default ModalList;
